<template>
	<div>
		<p class="text-#86909C">币种</p>
		<div class="mt-20px mb-20px border-1px border-solid border-#E5E6EB w-650px p-20px flex items-center justify-between rounded-8px box-border h-60px">
			<div class="flex items-center">
				<img :src="selectedCoin.icon" v-if="selectedCoin.icon" class="w-32px h-32px mr-10px">
				<p :class="{'text-#C9CDD4':!selectedCoin.coin}" class="text-18px">
					{{ selectedCoin.coin ? selectedCoin.coin : '搜索币种' }}
				</p>
			</div>
			<div>
				<el-icon><ArrowDown /></el-icon>
			</div>
		</div>
		<div class="flex items-center">
			<div v-for="(item,index) in coinList" :key="index"
			class="flex border-1px border-solid border-#E5E6EB
			rounded-16px items-center mr-20px cursor-pointer pr-6px pl-6px">
				<img :src="item.icon" class="w-14px h-14px mr-6px">
				<p>{{ item.coin }}</p>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const selectedCoin = ref<any>({
	// icon: "/home/btc.svg",
	// coin: "BTC"
});
const coinList = ref<any[]>([{
		icon: "/home/btc.svg",
		coin: "BTC"
	},
	{
		icon: "/home/eth.svg",
		coin: "ETH"
	},
	{
		icon: "/home/trx.svg",
		coin: "TRX"
	},
	{
		icon: "/home/usdt.svg",
		coin: "USDT"
	}])
</script>
<style lang="scss" scoped>

</style>
